$(function(){
    //商品页 字符串渲染页面
    $.ajax({
        url : "../static/data/product.json",
        success: function(res){
            renderPros(res.products);
        }
    })
    function renderPros (res){
        $(".containers").html(
            res.map(item =>
            `<div class="option-card">
                <a href="http://localhost:8080/detail.html" target="_blank"><img src="${item.image}" alt=""></a>
                <div class="describe">
                    <div class="price">￥${item.price}</div>
                    <div class="name">${item.name}</div>
                </div>
                <div class="putin">
                    <div class="num">+&nbsp;1&nbsp;-</div>
                    <button>加入购物车</button>
                    <div class="collection">
                      <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-ziyuan"></use>
                      </svg>
                      收藏
                    </div>
                </div>
            </div> `
            ).join("")
        )
    }
})